<template>
  <div class="login">
    <div class="header">
      <div class="header-logo"></div>
      <div class="title">后台管理系统</div>
    </div>
    <div class="forget-wrap">
      <a-page-header
        style="border: 1px solid rgb(235, 237, 240); color: #fff"
        title="忘记密码"
        @back="goBack"
      >
        <a-form
          ref="forgetRef"
          :rules="forgetRules"
          :model="forgetForm"
          layout="vertical"
          :hideRequiredMark="true"
        >
          <a-row style="display: flex; align-items: center">
            <a-col :span="row">
              <a-form-item
                label="请输入你已绑定的手机号"
                name="mobile"
                has-feedback
              >
                <a-input
                  placeholder="请输入您的手机号"
                  v-model:value.trim="forgetForm.mobile"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="5" :offset="1" class="send-btn">
              <a-button type="primary" @click="sendCode" :disabled="disabled">{{
                sendText
              }}</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="row">
              <a-form-item
                label="请输入手机收到的验证码"
                name="code"
                has-feedback
              >
                <a-input
                  placeholder="请输入你的验证码"
                  v-model:value.trim="forgetForm.code"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="row">
              <a-form-item label="输入新密码" name="password" has-feedback>
                <a-input-password
                  v-model:value.trim="forgetForm.password"
                  placeholder="请输入密码"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="row">
              <a-form-item label="确认新密码" name="password2">
                <a-input-password
                  v-model:value.trim="forgetForm.password2"
                  placeholder="请再次输入密码"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="forget-confirm-btn">
            <a-col :span="4">
              <a-button type="primary" @click="editPassword" :loading="loading1"
                >确定</a-button
              >
            </a-col>
            <a-col :span="4" :offset="2">
              <a-button type="info" @click="goBack">返回</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-page-header>
    </div>
    <a-row style="margin-top: 50px">
      <a-col :span="8" :offset="8">
        版权及最终解释权归小鹿科技有限公司所有
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { reactive, ref, h } from "vue";
import {
  validatorPass,
  validtorConfirmPass,
  validatorPhone,
} from "@/assets/js/validate";
import { notification, Button, message } from "ant-design-vue";
import { SmileOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { passwordSms, updatePassword } from "@/api/login/index";
export default {
  setup() {
    const router = useRouter();
    const checked = ref(false); //是否自动登录
    const loading1 = ref(false); //是否显示修改密码加载……
    const forgetRef = ref("");

    let row = ref(10);
    const sendText = ref("发送验证码");
    const disabled = ref(false);
    const time = ref(60);

    const form = reactive({
      mobile: "",
      password: "",
    });
    const forgetForm = reactive({
      mobile: "",
      code: "",
      password: "",
      password2: "",
    });
    const forgetRules = {
      mobile: [
        {
          required: true,
          validator: validatorPhone,
          trigger: "blur",
        },
      ],
      code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      password: [
        {
          required: true,
          validator: validatorPass,
          trigger: "blur",
        },
      ],
      password2: [
        { required: true, validator: validtorConfirmPass, trigger: "blur" },
      ],
    };

    const goBack = () => {
      router.go(-1);
    };

    // 修改密码
    const editPassword = () => {
      forgetRef.value
        .validate()
        .then(async () => {
          loading1.value = true;
          console.log(forgetForm);
          let res = await updatePassword(forgetForm);
          if (res.success) {
            router.go(-1);
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    // 发送验证码
    const sendCode = async () => {
      let regPhone =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!forgetForm.mobile) {
        message.error("请输入手机号!!!");

        return;
      } else if (!regPhone.test(forgetForm.mobile)) {
        message.error("手机号格式不正确，请重新输入!!!");
        return;
      }

      let res = await passwordSms(forgetForm.mobile);
      if (res.success) {
        // 如果有定时器先清除  0s到60s都要展示
        if (timer) {
          clearInterval(timer);
        }

        let timer = null;
        timer = setInterval(() => {
          if (time.value == -1) {
            clearInterval(timer); //清除定时器
            sendText.value = "发送验证码";
            time.value = 60;
            disabled.value = false;
          } else {
            sendText.value = time.value + "s";
            time.value--;
            disabled.value = true;
          }
        }, 1000);

        notification.open({
          message: "通知",
          duration: 3,
          description: "验证码已发送，请注意查收哦!",
          onClick: () => {},
          icon: h(SmileOutlined, { style: "color: #339966" }),
        });
      }
    };
    return {
      checked,
      form,
      forgetRef,
      forgetForm,
      forgetRules,
      row,
      loading1,
      sendText,
      disabled,
      time,
      sendCode,
      editPassword,
      goBack,
    };
  },
};
</script>

<style scoped lang="less">
.title() {
  font-size: 20px;
  font-weight: bold;
}
.login {
  background: url("../assets/img/bg.jpg");
  .header {
    height: 200px;
    display: flex;
    align-items: center;
    padding: 0px 30px;
    .header-logo {
      width: 25%;
      height: 100px;
      background-color: tomato;
    }
    .title {
      margin-left: 50px;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
    }
  }
  .content {
    width: 100%;
    height: 300px;
    display: flex;
    padding-left: 30px;
    .content-img {
      width: 60%;
      height: 100%;
      background-color: tomato;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .login-wrap {
      padding: 30px 60px 30px 70px;
      margin-right: 50px;
      border: solid 1px rgb(235, 237, 240);
      border-radius: 20%;
      .login-title {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
      }
      .login-wrap-bottom {
        display: flex;
        justify-content: space-between;
        .auto-login {
          font-size: 12px;
        }
        .forget-password {
          font-size: 13px;
        }
      }
    }
  }
  //   忘记密码
  .forget-wrap {
    padding: 0 40% 30px 20px;
    transition: all 1s ease-in-out;
    .title {
      border-bottom: solid 1px rgb(230, 224, 224);
      margin-bottom: 30px;
      .title;
    }
  }
}
// 发送验证码按钮
.send-btn {
  .ant-btn {
    width: 100px;
  }
}
</style>
